
<template>
  <div>
    <Header />
    <Elsearch />
    <div class="top">
      <div class="btn-box">
        <button @click="fun()" ref="btn">全部</button>
        <button @click="fun1()" ref="btn1">kindle</button>
        <button @click="fun2()" ref="btn2">无线耳机</button>
        <button @click="fun3()" ref="btn3">游戏机</button>
      </div>
      <component :is="btn"></component>
    </div>
    <!-- <Footernav /> -->
   <Footer class="footer"/>

  </div>
</template>

<script>
import Header from './header.vue';
import Footer from './Footer.vue';
// import Footernav from "./footernav.vue";
import Elsearch from "./elsearch.vue";
import el1 from "./el1.vue";
import el2 from "./el2.vue";
import el3 from "./el3.vue";
import el4 from "./el4.vue";
export default {
  name: "electronic",
  data() {
    return {
      btn: "el1",
    };
  },
  methods: {
    fun() {
      this.btn = "el1";
      this.$refs.btn.style.backgroundColor = "#497749";
      this.$refs.btn.style.color = "#fff";
      this.$refs.btn1.style.backgroundColor = "";
      this.$refs.btn1.style.color = "";
      this.$refs.btn2.style.backgroundColor = "";
      this.$refs.btn2.style.color = "";
      this.$refs.btn3.style.backgroundColor = "";
      this.$refs.btn3.style.color = "";
    },
    fun1() {
      this.btn = "el2";
      this.$refs.btn1.style.backgroundColor = "#497749";
      this.$refs.btn1.style.color = "#fff";
      this.$refs.btn.style.backgroundColor = "";
      this.$refs.btn.style.color = "";
      this.$refs.btn2.style.backgroundColor = "";
      this.$refs.btn2.style.color = "";
      this.$refs.btn3.style.backgroundColor = "";
      this.$refs.btn3.style.color = "";
    },
    fun2() {
      this.btn = "el3";
      this.$refs.btn.style.backgroundColor = "";
      this.$refs.btn.style.color = "";
      this.$refs.btn1.style.backgroundColor = "";
      this.$refs.btn1.style.color = "";
      this.$refs.btn2.style.backgroundColor = "#497749";
      this.$refs.btn2.style.color = "#fff";
      this.$refs.btn3.style.backgroundColor = "";
      this.$refs.btn3.style.color = "";
    },
    fun3() {
      this.btn = "el4";
      this.$refs.btn.style.backgroundColor = "";
      this.$refs.btn.style.color = "";
      this.$refs.btn1.style.backgroundColor = "";
      this.$refs.btn1.style.color = "";
      this.$refs.btn3.style.backgroundColor = "#497749";
      this.$refs.btn3.style.color = "#fff";
      this.$refs.btn2.style.backgroundColor = "";
      this.$refs.btn2.style.color = "";
    },
  },
  components: {
    Header,
    Footer,
    // Footernav,
    Elsearch,
    el1,
    el2,
    el3,
    el4,
  },
};
</script>

<style scoped>
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
}
.top{
      width: 90%;
      margin: 0.2rem auto;
  }
.btn-box {
  width: 100%;
  height: 0.5rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.btn-box > button {
  margin-top: 0.06rem;
  width: 0.74rem;
  margin-right: 0.1rem;
  height: 0.35rem;
  border: none;
  border-radius: 20px;
}
</style>